import React from 'react';
import {Breadcrumb, Layout, Menu, theme} from 'antd';
import './systle/index.css'
const {Header, Content, Footer} = Layout;


const item = Array.of({key:0,label:'登录'},{key:1,label: '管理'})

const layou = () => {
    const {
        token: {colorBgContainer, borderRadiusLG},
    } = theme.useToken();
    return (
        <Layout className={"contain"}>
            <Header style={{display: 'flex', alignItems: 'center'}}>
                <div className="demo-logo"/>
                <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={['2']}
                    items={item}
                    style={{flex: 1, minWidth: 0}}
                />
            </Header>
            <Content  className={"context"}>
                <Breadcrumb
                    style={{margin: '16px 0'}}
                    items={[{title: 'Home'}, {title: 'List'}, {title: 'App'}]}
                />
                <div
                    style={{
                        background: colorBgContainer,
                        minHeight: 280,
                        padding: 24,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    Content
                </div>
            </Content>
            <Footer style={{textAlign: 'center'}}>
                Ant Design ©{new Date().getFullYear()} Created by Ant UED
            </Footer>
        </Layout>
    );
};
export default layou;